<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link rel="stylesheet" href="../../../static/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="../../../static/css/public.css" media="all" />
<link rel="stylesheet" href="../../../static/plugin/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote quoteBox" has-permission="00450010">
		<form class="layui-form">
			<div class="layui-inline">
				<label class="layui-form-label">所属部门</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="dname" readonly lay-verify="required" placeholder=""> <input type="hidden" class="searchVal" name="did" id="did">
				</div>
				<a class="layui-btn" id="btn_treeClean">清空</a>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">时间</label>
				<div class="layui-inline">
					<input type="text" class="layui-input searchVal" id="date" name="dateStr">
				</div>
			</div>
			<div class="layui-inline">
				<a class="layui-btn search_btn" data-type="reload">搜索</a>
			</div>
		</form>
	</blockquote>
	<div class="layui-collapse" id="tableLists"></div>
	<div id="treeDiv" class="menuContent" style="display: none; position: absolute; background: white; border: 1px black solid; z-index: 999">
		<ul id="departmentTree" class="ztree" style="margin-top: 0; width: 160px;"></ul>
	</div>
	<script type="text/javascript" src="../../../static/js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="../../../static/layui/layui.js"></script>
	<script type="text/javascript" src="../../../static/custom/js/common.js"></script>
	<script type="text/javascript" src="../../../static/plugin/zTree/js/jquery.ztree.core.js"></script>
	<script type="text/javascript">
		layui.use([ 'form', 'layer', 'element', 'table', 'laytpl', 'laydate' ], function() {
			var listApi = '../../../paid/paid/listByDid';
			var pram = null;
			var form = layui.form, layer = parent.layer === undefined ? layui.layer : top.layer;
			var $ = layui.jquery;
			var element = layui.element;
			var laytpl = layui.laytpl;
			var table = layui.table;
			var laydate = layui.laydate;
			var eData = [];
			//获取上一个月
			function getBeforeMonth() {
				var d = new Date();
				var currentYear = new Date().getFullYear();
				var currentMonth = new Date().getMonth() + 1;
				var beforeMonth = currentMonth - 1;
				if (beforeMonth == 0) {
					currentYear -= 1;
					beforeMonth = 12;
				}
				if (beforeMonth < 10) {
					beforeMonth = "0" + beforeMonth;
				}
				return currentYear + "-" + beforeMonth;
			}
			//执行一个laydate实例
			laydate.render({
				elem : '#date',
				type : 'month',
				value : getBeforeMonth()
			});
			//用户列表
			function listLoad(data) {
				loadAjax(listApi, "get", data, function(response) {
					baseCallBack(response, function(response) {
						$("#tableLists").html("");
						var posts = response.data.posts;
						var employees = response.data.employees;
						var paids = response.data.paids;
						var dictionaries = response.data.dictionaries;
						if (posts) {
							$(posts).each(function(i1, v1) {
								eData = [];
								var str = '';
								var arr = [ {
									field : "ername",
									title : "员工",
									align : "center"
								} ];
								var expressionArray = JSON.parse(v1.expression);
								for (var j = 0; j < expressionArray.length; j++) {

									var obj = {
										field : expressionArray[j].key,
										title : expressionArray[j].name,
										align : "center",
										templet : function(d) {
											var str = "";
											str += '<div>' + (d[this.field] ? d[this.field] : "") + '</div>';
											return str;
										}
									};
									arr.push(obj);
								}
								arr.push({
									field : 'formula',
									title : '薪酬表达式',
									align : 'center',
									width : "10%"
								}, {
									field : "salary",
									title : "薪酬总额",
									align : "center",
									templet : function(d) {
										var str = "";
										str += '<div id="'+d.id+'" style="font-weight:bold;font-size:20px">' + (d.salary ? d.salary : "") + '</div>';
										return str;
									}
								});
								//遍历员工
								$(employees).each(function(i2, v2) {
									if (v2.pid == v1.id) {
										var obj = {
											id : v2.id,
											ername : v2.rname
										}
										obj['pid'] = v1.id;
										//遍历员工薪酬表
										$(paids).each(function(i3, v3) {
											var salaryArray = JSON.parse(v3.expression);
											//存在薪酬记录
											if (v2.id == v3.eid) {
												for (var j = 0; j < salaryArray.length; j++) {
													obj[salaryArray[j].key] = salaryArray[j].value;
												}
												obj["salary"] = v3.salary;
												obj["formula"] = v3.formula;
												return;
											}
										});
										eData.push(obj);
									}

								});

								str += ' <div class="layui-colla-item"><h2 class="layui-colla-title">';
								str += v1.name;
								str += '</h2>';
								str += ' <div class="layui-colla-content layui-show">';
								str += '<table id="list'+i1+'" lay-filter="list'+i1+'"></table>';
								str += '</div>';
								str += '</div>';
								$("#tableLists").append(str);
								//渲染折叠面板
								layui.element.render();
								tableIns = table.render({
									elem : '#list' + i1,
									cellMinWidth : constant.table.cellMinWidth,
									page : false,
									cols : [ arr ],
									data : eData
								});
							});
							$("#preview_and_save").css("display", "block");
						} else {
							$("#preview_and_save").css("display", "none");
						}
					});
				});
			}

			//搜索【此功能需要后台配合，所以暂时没有动态效果演示】
			$(".search_btn").on("click", function() {
				if ($("#date").val() == "") {
					layer.msg('请选择日期', {
						icon : 5
					});
					return;
				}
				pram = merger(pram, getsearchVal());
				listLoad(pram);
			});

			//部门搜索框渲染
			//ztree
			var setting = {
				view : {
					dblClickExpand : false
				},
				data : {
					simpleData : {
						enable : true
					}
				},
				callback : {
					onClick : onClick
				}
			};
			function onClick(e, treeId, treeNode) {
				$("#did").val(treeNode.id);
				$("#dname").val(treeNode.name);
				hideMenu();
			}
			$("#btn_treeClean").click(function() {
				$("#did").val('');
				$("#dname").val('');
			})
			function showMenu() {
				var cityObj = $("#dname");
				var cityOffset = $("#dname").offset();
				$("#treeDiv").css({
					left : cityOffset.left + "px",
					top : cityOffset.top + cityObj.outerHeight() + "px"
				}).slideDown("fast");
				$("body").bind("mousedown", onBodyDown);
			}
			function hideMenu() {
				$("#treeDiv").fadeOut("fast");
				$("body").unbind("mousedown", onBodyDown);
			}
			function onBodyDown(event) {
				if (!(event.target.id == "btn_treeSelect" || event.target.id == "treeDiv" || $(event.target).parents("#treeDiv").length > 0)) {
					hideMenu();
				}
			}
			$("#dname").click(function() {
				showMenu()
			})
			loadAjax("../../../getDepartment", "get", null, function(response) {
				baseCallBack(response, function(response) {
					$.fn.zTree.init($("#departmentTree"), setting, response.data);
				});
			});

		})
	</script>
</body>
</html>